<template>
  <div class="info">
    <ul>
      <li>
        canvas:<span>{{ width }}x{{ height }}</span>
      </li>
      <li>
        x:<span>{{ x < 0 || x > width-1 ? "out" : x }}</span>
      </li>
      <li>
        y:<span>{{ y < 0 || y > height-1 ? "out" : y }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      width: 1,
      height: 1,
      x: 0,
      y: 0,
    };
  },
  created() {
    this.$bus.$on("canvasInfo", ({ width, height, x, y }) => {
      this.width = width;
      this.height = height;
      this.x = x;
      this.y = y;
    });
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.info {
  ul {
    text-transform: uppercase;
    font-family: "Oswald";
    color: #fff;
    font-size: 12px;
    box-sizing: border-box;
    padding: 5px 10px;
    li {
      &:not(:last-of-type) {
        margin-bottom: 5px;
      }
      font-size: 12px;
      span {
        margin-left: 5px;
      }
    }
  }
}
</style>